<template>
  <OtherLoadingVue v-if="load" />
  <CommunityMenu @query="handlerMenu" :tagList="tagList" @select="handlerSelect" @refresh="getList(1)"></CommunityMenu>
  <CommunityList :dataList="communityList"></CommunityList>
  <button class="icon-button" @click="toPublish" title="发表问题">
    <el-icon class="icon"><Plus /></el-icon>
    <span class="text">发布</span>
  </button>
</template>

<script setup>
import { useRouter } from 'vue-router'
import CommunityMenu from '@/components/client/community/CommunityMenu.vue'
import CommunityList from '@/components/client/community/CommunityList.vue'
import { onMounted, ref } from 'vue'
import request from '@/util/request'
import { ElNotification } from 'element-plus'
import OtherLoadingVue from '@/components/load/OtherLoading.vue'

const router = useRouter()
const communityList = ref([])
const tagList = ref([])
const load = ref(false)

const toPublish = () => {
  router.push('/published')
}

const getList = (type) => {
  request
    .get(`/user/community/list?type=${type}`)
    .then((res) => {
      console.log('获取成功：', res)
      communityList.value = res.data
    })
    .catch((err) => {
      if (err.response) {
        console.error(err.message)
        ElNotification({
          title: 'Error',
          message: err.message,
          type: 'error'
        })
      } else {
        ElNotification({
          title: 'Error',
          message: '网络错误',
          type: 'error'
        })
      }
    })
}
const getTag = () => {
  request
    .get('/user/tag/list')
    .then((res) => {
      console.log('获取成功：', res)
      tagList.value = res.data
    })
    .catch((err) => {
      if (err.response) {
        console.error(err.message)
        ElNotification({
          title: 'Error',
          message: err.message,
          type: 'error'
        })
      } else {
        ElNotification({
          title: 'Error',
          message: '网络错误',
          type: 'error'
        })
      }
    })
}
const handlerMenu = (type) => {
  getList(type)
}

const handlerSelect = (search) => {
  request
    .post('/user/community/search', search)
    .then((res) => {
      console.log('获取成功：', res)
      communityList.value = res.data
    })
    .catch((err) => {
      if (err.response) {
        console.error(err.message)
        ElNotification({
          title: 'Error',
          message: err.message,
          type: 'error'
        })
      } else {
        ElNotification({
          title: 'Error',
          message: '网络错误',
          type: 'error'
        })
      }
    })
}

onMounted(() => {
  getList(1)
  getTag()
  load.value = true
  setTimeout(() => {
    load.value = false
  }, 2000)
})
</script>

<style scoped lang="scss">
$fontColor:#0d6000;
.icon-button {
  position: fixed;
  left: 90%;
  top: 80%;
  width: 40px; /* 根据需要调整宽度 */
  height: 40px; /* 根据需要调整高度 */
  border: 1px #000 solid;
  background-color: $fontColor;
  cursor: pointer;
  display: flex;
  color: #fff;
  font-weight: 600;
  font-size: 11px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* 隐藏超出按钮范围的文本 */
}
.icon {
  font-size: 24px; /* 根据需要调整图标大小 */
}

.text {
  position: absolute;
  top: 50%; /* 初始位置在按钮的中心 */
  left: 50%;
  transform: translate(-50%, -50%); /* 居中文本 */
  opacity: 0; /* 初始时文本不可见 */
  transition: opacity 0.3s ease-in-out; /* 动画效果 */
  pointer-events: none; /* 防止文本阻挡按钮的点击事件 */
}

.icon-button:hover .text {
  opacity: 1; /* 鼠标移入时文本可见 */
}

.icon-button:hover .icon {
  opacity: 0; /* 可选：如果需要在鼠标移入时隐藏图标，可以设置opacity为0 */
}
</style>
